<template>
	<view class="page">
		<view class="box_2">
			<view class="group_2">
				<view class="block_4" style="display: none;">
					<view class="image-text_5">
						<view class="icon_1">
						</view>
						<view class="text-group_1">
							<text lines="1" class="text_1"> {{ order.start_address |adress }}</text>
						</view>
					</view>
					<view class="image_1">
					</view>
					<view class="image-text_6">
						<view class="icon_2">
						</view>
						<text lines="1" class="text-group_2">{{ order.end_address |adress }}</text>
					</view>
				</view>
				<view class="list_wrapper">
					<view class="distance">支付成功</view>
					<view class="money">{{ order.price }}元</view>
					<!-- 					<view class="distance" v-if="order.end_address == ''">距离：0公里</view>
					<view class="distance" v-else>距离：{{order.distance|kilometer }}公里</view> -->
				</view>
			</view>
		</view>
		<view class="group_3">
			<view class="text-wrapper_2">
				<text lines="1" class="text_8">订单详情</text>
			</view>
			<view class="section_1">
				<view class="text-wrapper_3">
					<text lines="1" class="text_10">订单编</text>
					<text lines="1" class="text_11">号</text>
				</view>
				<text lines="1" class="text_12">{{order.order_id}}</text>
			</view>
			<view class="text-wrapper_19">
				<text lines="1" class="text_16">两地距离</text>
				<text lines="1" class="text_17">{{order.distance|kilometer}}公里</text>
			</view>
			<view class="section_3">
				<view class="text-wrapper_6">
					<text lines="1" class="text_18">出发</text>
					<text lines="1" class="text_19">地</text>
				</view>
				<view class="text-wrapper_7">
					<text lines="1" class="text_20"> {{ order.start_address }}</text>

				</view>
			</view>
			<view class="text-wrapper_20">
				<text lines="1" class="text_23">目的地</text>
				<text lines="1" class="text_24">{{order.end}}</text>
			</view>
			<view class="section_4">
				<text lines="1" class="text_25">用时</text>
				<view class="text-wrapper_9">
					<text lines="1" class="text_26" v-if="order.order_service_time == ''">1分钟</text>
					<text lines="1" class="text_26" v-else>{{order.order_service_time}}分钟</text>
				</view>
			</view>
			<view class="section_5">
				<view class="text-wrapper_10">
					<text lines="1" class="text_28">创建</text>
					<text lines="1" class="text_29">时间</text>
				</view>
				<text lines="1" decode="true" class="text_30">{{order.createtime|formatDate}}</text>
			</view>
			<view class="section_6">
				<view class="text-wrapper_11">
					<text lines="1" class="text_31">结束</text>
					<text lines="1" class="text_32">时间</text>
				</view>
				<text lines="1" decode="true" class="text_33">{{order.done_time|formatDate}}</text>
			</view>
		</view>
		<view class="box_3">
			<view class="text-wrapper_12">
				<text lines="1" class="text_34">代驾司机</text>
				<!-- 		<text lines="1" class="text_35">驾</text>
				<text lines="1" class="text_36">司机</text> -->
			</view>
			<view class="block_1" v-if="order.relation_driver_data == ''">
				<view class="box_4">
					<view class="icon_3">
						<image src="../../static/人像.png" class="label_1"></image>
					</view>
					<view class="text-group_6">
						<view class="text-wrapper_13">{{order.driver.driving_age}}</view>
						<text lines="1" class="text_39">{{order.driver.driver_mobile}}</text>
					</view>
					<view class="icon_4" @tap="callPhone(order.driver.driver_mobile)">
						<image src="../../static/209电话(1)@2x.png" class="thumbnail_1" />
					</view>
				</view>
				<view class="box_5">
					<view class="image-text_7">
						<view class="text-group_4">
							<text lines="1" class="text_40">{{ order.start_address |adress }}</text>

						</view>
					</view>
					<view class="image_2">

					</view>
					<view class="image-text_8">
						<text lines="1" class="text-group_5">{{ order.end | adress }}</text>
					</view>
				</view>
			</view>
			<view v-else class="block_1" v-for="(v,dex) in another_driver" :key="dex">
				<view class="box_4">
					<image :src="v.image" class="label_1"></image>

					<view class="text-group_6">
						<view class="text-wrapper_13">
							{{v.driving_age}}
						</view>
						<text lines="1" class="text_39">{{v.mobile}}</text>
					</view>
					<view class="icon_4" @tap="callPhone(v.mobile)">
						<image src="../../static/209电话(1)@2x.png" class="thumbnail_1" />
					</view>
				</view>
				<view class="box_5">
					<view class="image-text_7">
						<view class="text-group_4">
							<text lines="1" class="text_40">{{ order.start_address |adress }}</text>

						</view>
					</view>
					<view class="image_2">

					</view>
					<view class="image-text_8">
						<text lines="1" class="text-group_5">{{ order.end | adress }}</text>
					</view>
				</view>

			</view>
			<view class="block_1">
				<view class="box_4">
					<image :src="order.driver.avatar" class="label_1"></image>
					<view class="text-group_6">
						<view lines="1" class="text_39">{{ order.driver_mobile }}</view>
					</view>
					<view class="icon_4" @tap="callPhone(order.driver_mobile)">
						<image src="../../static/209电话(1)@2x.png" class="thumbnail_1" />
					</view>
				</view>
				<view class="box_5">
					<view class="image-text_7">
						<view class="text-group_4">
							<text lines="1" class="text_40">{{ order.start_address |adress }}</text>

						</view>
					</view>
					<view class="image_2">

					</view>
					<view class="image-text_8">
						<text lines="1" class="text-group_5">{{ order.end | adress }}</text>
					</view>
				</view>

			</view>
			<view class="address" v-if="order.comment_text== '未评价'">
				<view lines="1" class="text-wrapper_15 text_47">评价</view>
				<view style="background-color: #FA7F44 ">
					<my-issue :score="score" :headPicShow="false" :submitShow="false" @scoreChange="scoreChange" class="issue"
						:headTitleShow="false" />
				</view>
				<uni-easyinput type="textarea" autoHeight v-model="textbox" placeholder="请输入评价内容"></uni-easyinput>
				<button type="primary" @tap="comment()" style="background-color: #5498F5;">评价本次服务</button>
			</view>
			<view v-else>
				<view class="text-wrapper_15">
					<text lines="1" class="text-wrapper_15 text_47">我的评价</text>
				</view>
				<my-issue :score="check_score" :headPicShow="false" :submitShow="false" class="issue"
					:headTitleShow="false" />
				<view class="text-wrapper_17">
					<view lines="1" class="text_55">{{order.comment_info}}</view>
					<text lines="1" class="text_55" style="text-align: center;"
						v-if="order.comment_info== ''">暂无评价内容</text>
				</view>
			</view>
			<!-- <view class="group_11">
			<text lines="1" class="text-wrapper_15 text_47">我的评价</text>
			<view class="text-wrapper_17">
				<text lines="1" class="text_55">{{order.comment_info}}</text>
			</view>
			<text lines="1" class="text_55" style="text-align: center;"
				v-if="order.comment_text== '未评价'">暂无评价</text>
		</view> -->
		</view>

	</view>

</template>

<script>
	import logger from '../../utils/logger';
	import QQMapWX from '../../libs/qqmap-wx-jssdk/qqmap-wx-jssdk.js';
	import myIssue from '@/components/issue/components/myIssue.vue';
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		components: {
			myIssue,
		},
		data() {
			return {
				// realVal,
				another_driver: [],
				place: "",
				map: {
					latitude: '',
					longitude: '',
					covers: [],
					scale: 16,
					polyline: []
				},
				focus: false,
				price: '',
				textbox: '',
				order: {},
				orderId: '',
				timer: '',
				score: 5,
				check_score:0,
				isDirection: false,
				actual: {
					price: 0,
					distance: 0
				},
				route: {
					duration: '--'
				},
				paystr: ''
			};
		},
		filters: {
			kilometer: value => {
				let distance = parseFloat(value / 1000);
				return distance.toFixed(2);
			},
			formatDate: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "." + month + "." + sdate + " " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},

			numFilter(value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value / 1000).toFixed(2)
				return realVal
			},



			duration: value => {
				if (value > 3600) {
					let h = parseInt(value / 3600);
					let s = value % 3600;
					if (s > 0) {
						return h + '小时' + parseInt(s / 60) + '分钟';
					} else {
						return h + '小时';
					}
				} else {
					return parseInt(value / 60) + '分钟';
				}
			}
		},
		onLoad(option) {
			this.initSdk();
			this.orderId = option.order_id;
			this.getOrderInfo();
			let pages = getCurrentPages();
			if (pages[pages.length - 1].$vm.schoolName) {
				this.place = pages[pages.length - 1].$vm.place
				console.log(this.place)
			}


			// console.log(option.place)
		},
		onShow() {
			// 如果存在订单则更新订单信息
			if (this.orderId) {

				this.timer = setInterval(() => {
					this.getOrderInfo();
				}, 2000)

			}

			// this.therFun()            
			// console.log(this.place)		


		},
		onHide() {
			// 隐藏时关闭定时器
			if (this.timer) {
				// console.log('清除定时器');
				clearInterval(this.timer);
				this.timer = '';
			}
		},

		methods: {
			scoreChange(score) {
				this.score = score;
			},
			async comment() {
				uni.showLoading({
					title: '加载中'
				});
				let res = await api.orderComment(this.orderId, this.score, this.textbox);
				helper.toast(res.msg);
				if (helper.hasLogin()) {
					this.getOrderInfo();
				}

				uni.hideLoading();
			},
			handleRoute(id) {
				const url = `.pagesB/TUI-Chat/chat?conversationID=${id}`;
				uni.redirectTo({
					url
				});
			},
			callPhone(driver_mobile) {
				uni.makePhoneCall({
					phoneNumber: driver_mobile
				});
			},
			otherFun(object) {
				if (object) {
					this.place = object.place

				} else {
					return
				}
			},
			endadress() {
				uni.navigateTo({
					url: "/pagesA/myDriving/address"
				})
			},
			call(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			reach() {
				uni.showModal({
					title: '操作提示',
					content: '请确认已到达出发地点等待用户',
					success: async e => {
						if (e.confirm) {
							let res = await api.orderReach(this.orderId);
							if (res.code == 1) {
								this.getOrderInfo();
							} else {
								helper.toast(res.msg);
							}
						}
					}
				});
			},
			done() {
				uni.showModal({
					title: '操作提示',
					content: '请确认已经达到目的地',
					success: async e => {
						if (e.confirm) {
							uni.getLocation({
								type: 'gcj02',
								success: async ret => {
									console.log(2);
									// 更新一次结束位置
									await this.updateOrderInfo();
									// 结束订单
									let res = await api.doneOrder({
										order_id: this.orderId,
										latitude: ret.latitude,
										longitude: ret.longitude
									});
									// 更新订单信息
									this.getOrderInfo();
								},
								fail: e => {
									helper.toast('获取位置失败');
								}
							});
						}
					}
				});
			},
			start() {
				uni.showModal({
					title: '操作提示',
					content: '请确认已接到用户并马上出发吗？',
					success: async e => {
						if (e.confirm) {
							console.log(1);
							uni.getLocation({
								type: 'gcj02',
								success: async ret => {
									console.log(2);
									// 当前地址
									let res = await api.startOrder({
										order_id: this.orderId,
										latitude: ret.latitude,
										longitude: ret.longitude
									});
									this.getOrderInfo();
								},
								fail: e => {
									helper.toast('获取位置失败');
								}
							});
						}
					}
				});
			},
			initSdk() {
				this.qqmapsdk = new QQMapWX({
					key: helper.config.qqmapsdk.key
				});
			},
			async getOrderPayScanInfo() {
				let res = await api.getOrderPayScanInfo(this.orderId);
				this.paystr = res.code_url;
			},
			async getOrderInfo() {
				// console.log('获取订单信息');
				let res = await api.getOrderInfo(this.orderId);

				this.order = res.data;
				this.check_score=res.data.comment_score;
				// console.log("订单信息", res.data)
				// console.log(res.data.start_latitude)
				this.another_driver = res.data.driver.relation_driver_data
				// console.log("其他订单信息", this.another_driver)
				// 如果订单未开始，以用户位置未起始点

				this.map.latitude = res.data.start_latitude;
				this.map.longitude = res.data.start_longitude;
				// console.log("经度",res.data.start_latitude)

				// 设置用户坐标点
				this.map.covers.push({
					latitude: res.data.start_latitude,
					longitude: res.data.start_longitude,
					// iconPath: '../../static/marker.png',
					id: 1,
				});

				// 如果订单为进行中，则实时更新费用及到达时间
				if (this.order.status == 2) {
					this.updateOrderInfo();
				}
				// 获取支付订单信息
				if (this.order.status == 3 && !this.paystr) {
					this.getOrderPayScanInfo();
				}
				// 如果订单为未完成状态，则定时更新
				if (this.order.status != 99 && !this.timer) {
					console.log('注册定时器');
					this.timer = setInterval(() => {
						this.getOrderInfo();
					}, 10 * 1000);
				}
				// 如果订单状态为已完成，切存在定时器，则关闭
				if (this.order.status == 99 && this.timer) {
					console.log('清除定时器');
					clearInterval(this.timer);
					this.timer = '';
				}
			},
			updateOrderInfo() {
				// 更新坐标信息
				uni.getLocation({
					type: 'gcj02',
					success: async res => {
						// 当前地址
						this.currLocation = res;
						this.map.latitude = res.latitude;
						this.map.longitude = res.longitude;
						// 设置当前坐标点
						this.map.covers = [{
							latitude: res.latitude,
							longitude: res.longitude,
							// iconPath: '../../static/marker.png'
						}];
						// 更新用户位置
						res.order_id = this.orderId;
						let data = await api.updateOrderLocation(res);
						this.actual = data.data;
						this.direction();
					}
				});
			},
			// 路径规划
			direction() {
				this.qqmapsdk.direction({
					mode: 'driving',
					from: this.currLocation.latitude + ',' + this.currLocation.longitude,
					to: this.order.end_latitude + ',' + this.order.end_longitude,
					complete: res => {
						if (!res.result || !res.result.routes || res.result.routes.length == 0) {
							// helper.toast('未获取到有效路线');
							return false;
						}
						let coors = res.result.routes[0].polyline,
							pl = []; //坐标解压（返回的点串坐标，通过前向差分进行压缩）
						this.route = res.result.routes[0];
						let kr = 1000000;
						// 处理坐标
						for (let i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						for (let i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							});
						}
						this.map.latitude = pl[0].latitude;
						this.map.longitude = pl[0].longitude;
						this.map.polyline = [{
							points: pl,
							color: '#227AFF',
							width: 4
						}];
						this.isDirection = true;
					}
				});
			}
		}
	};
</script>



<style scoped>
	.page {
		background-color: rgba(246, 246, 246, 1.000000);
		position: relative;
		width: 750rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.map {
		width: 100%;
		height: 702rpx;
	}

	.box_2 {
		width: 750rpx;
		display: flex;
		flex-direction: column;
	}

	.group_2 {
		background-color: rgba(255, 255, 255, 1.000000);
		height: 204rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
	}

	.block_4 {
		width: 602rpx;
		height: 38rpx;
		flex-direction: row;
		display: flex;
		margin: 36rpx 0 0 72rpx;
	}

	.image-text_5 {
		width: 176rpx;
		height: 38rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.icon_1 {
		width: 34rpx;
		height: 38rpx;
	}

	.text-group_1 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
		margin-top: 4rpx;
	}

	.text_1 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
	}

	.text_2 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
	}

	.text_3 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
	}

	.image_1 {
		width: 72rpx;
		height: 20rpx;
		margin: 10rpx 0 0 78rpx;
	}

	.image-text_6 {
		width: 208rpx;
		height: 38rpx;
		margin-left: 68rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.icon_2 {
		width: 34rpx;
		height: 38rpx;
	}

	.text-group_2 {
		width: 160rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
		margin-top: 4rpx;
	}

	.list_wrapper {
		width: 100%;
		height: 204rpx;
		display: flex;
		flex-direction: row;
		font-size: 40rpx;
		font-family: Source Han Sans CN-Medium;
	}

	.money {
		flex-direction: column;
		width: 50%;
		text-align: center;
		font-size: 28rpx;
		height: 204rpx;
		line-height: 204rpx;
	}

	.distance {
		flex-direction: column;
		width: 50%;
		color: #FA7F44;
		text-align: center;
		height: 204rpx;
		line-height: 204rpx;
	}

	.text_4 {
		width: 46rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 40rpx;
		font-family: Arial-Regular;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_5 {
		width: 20rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 20rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 20rpx 0 0 10rpx;
	}

	.text_6 {
		width: 24rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 40rpx;
		font-family: Arial-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 6rpx 0 0 316rpx;
	}

	.text_7 {
		width: 40rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 20rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 22rpx 0 0 6rpx;
	}

	.text-wrapper_2 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin: 36rpx 0 32rpx 30rpx;
	}

	.text_8 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_9 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.group_3 {
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.160784);
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		height: 586rpx;
		width: 692rpx;
		display: flex;
		flex-direction: column;
		margin: -2rpx 0 0 30rpx;
	}

	.section_1 {
		width: 458rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 0 42rpx;
	}

	.text-wrapper_3 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_10 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_11 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_12 {
		width: 324rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.section_2 {
		width: 206rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 0 42rpx;
	}

	.text-wrapper_4 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_13 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_14 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_15 {
		width: 72rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text-wrapper_19 {
		width: 230rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 0 42rpx;
	}

	.text_16 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_17 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.section_3 {
		width: 230rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 0 42rpx;
	}

	.text-wrapper_6 {
		width: 72rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_18 {
		width: 72rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_19 {
		width: 72rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text-wrapper_7 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_20 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_21 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_22 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text-wrapper_20 {
		width: 206rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 0 42rpx;
	}

	.text_23 {
		width: 72rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_24 {
		width: 72rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.section_4 {
		width: 210rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 0 42rpx;
	}

	.text_25 {
		width: 48rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text-wrapper_9 {
		width: 76rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_26 {
		width: 76rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.section_5 {
		width: 360rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 0 42rpx;
	}

	.text-wrapper_10 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_28 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_29 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_30 {
		width: 226rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.section_6 {
		width: 360rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 44rpx 0 42rpx 42rpx;
	}

	.text-wrapper_11 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_31 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		/* text-align: center; */
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_32 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_33 {
		width: 226rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(170, 170, 170, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.box_3 {
		width: 750rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.text-wrapper_12 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin: 54rpx 0 0 30rpx;
	}

	.text_34 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_35 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_36 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.block_1 {
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.160784);
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		height: 200rpx;
		width: 692rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0 0 30rpx;
	}

	.box_4 {
		/* display: none; */
		width: 630rpx;
		height: 96rpx;
		flex-direction: row;
		display: flex;
		margin: 50rpx 5%;
	}

	.icon_3 {
		background-color: rgba(217, 227, 239, 1.000000);
		border-radius: 100%;
		height: 96rpx;
		display: flex;
		flex-direction: column;
		width: 96rpx;
	}

	.label_1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.text-group_6 {
		width: 224rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 10rpx 0 0 26rpx;
	}

	.text-wrapper_13 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin-left: 2rpx;
	}

	.text_37 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_38 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_39 {
		width: 224rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin-top: 16rpx;
	}

	.icon_4 {
		border-radius: 100%;
		height: 60rpx;
		border: 2px solid rgba(233, 233, 233, 1);
		display: flex;
		flex-direction: column;
		width: 60rpx;
		margin: 18rpx 0 0 224rpx;
	}

	.thumbnail_1 {
		width: 32rpx;
		height: 32rpx;
		margin: 14rpx 0 0 14rpx;
	}

	.box_5 {
		width: 566rpx;
		height: 38rpx;
		flex-direction: row;
		/* display: flex; */
		margin: 56rpx 0 0 50rpx;
		display: none;
	}

	.image-text_7 {
		width: 168rpx;
		height: 38rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.icon_5 {
		width: 34rpx;
		height: 38rpx;
	}

	.text-group_4 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
		margin-top: 4rpx;
	}

	.text_40 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
	}

	.text_41 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
	}

	.text_42 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
	}

	.image_2 {
		width: 72rpx;
		height: 20rpx;
		margin: 10rpx 0 0 84rpx;
	}

	.image-text_8 {
		width: 172rpx;
		height: 38rpx;
		margin-left: 70rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.icon_6 {
		width: 34rpx;
		height: 38rpx;
	}

	.text-group_5 {
		width: 128rpx;
		height: 32rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		margin-top: 4rpx;
	}

	.text-wrapper_21 {
		width: 468rpx;
		height: 40rpx;
		flex-direction: row;
		display: flex;
		margin: 70rpx 0 26rpx 116rpx;
	}

	.text_43 {
		width: 46rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 40rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_44 {
		width: 20rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 20rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 14rpx 0 0 16rpx;
	}

	.text_45 {
		width: 24rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 40rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 316rpx;
	}

	.text_46 {
		width: 40rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 20rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 16rpx 0 0 6rpx;
	}

	.text-wrapper_15 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin: 60rpx 0 16rpx 30rpx;
	}

	.text_47 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_48 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_49 {
		width: 144rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.group_11 {
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.160784);
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		width: 692rpx;
		height: 425rpx;
		display: flex;
		flex-direction: column;
		margin: -2rpx 0 466rpx 30rpx;
	}

	.group_12 {
		background-color: rgba(250, 250, 250, 1.000000);
		border-radius: 20rpx;
		width: 668rpx;
		height: 162rpx;
		display: flex;
		flex-direction: column;
		margin: 16rpx 0 0 12rpx;
	}

	.section_7 {
		width: 214rpx;
		height: 28rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 22rpx 0 0 26rpx;
	}

	.text-wrapper_16 {
		width: 140rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_50 {
		width: 140rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_51 {
		width: 140rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_52 {
		width: 140rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_53 {
		width: 140rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.tag_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 10rpx;
		height: 28rpx;
		border: 1px solid rgba(117, 186, 253, 1);
		display: flex;
		flex-direction: column;
		width: 56rpx;
	}

	.text_54 {
		width: 40rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(117, 186, 253, 1.000000);
		font-size: 20rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 4rpx 0 0 8rpx;
	}

	.image-wrapper_2 {
		/* width: 450rpx; */
		height: 60rpx;
		flex-direction: row;
		display: flex;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular;
		/* margin: 32rpx 0 20rpx 112rpx; */
		text-align: center;
		margin: 30rpx auto;
	}

	.label_2-0 {
		width: 52rpx;
		height: 50rpx;
		margin: 6rpx 46rpx 0 0;
	}

	.label_2-1 {
		width: 52rpx;
		height: 50rpx;
		margin: 6rpx 46rpx 0 0;
	}

	.label_2-2 {
		width: 52rpx;
		height: 50rpx;
		margin: 6rpx 46rpx 0 0;
	}

	.label_2-3 {
		width: 52rpx;
		height: 50rpx;
		margin: 6rpx 46rpx 0 0;
	}

	.label_2-4 {
		width: 52rpx;
		height: 50rpx;
		margin: 6rpx 46rpx 0 0;
	}

	.text-wrapper_17 {
		background-color: rgba(250, 250, 250, 1.000000);
		border-radius: 20rpx;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		width: 668rpx;
		margin: 25rpx 0 18rpx 45rpx;
	}

	.text_55 {
		/* width: 280rpx; */
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: left;
		/* white-space: nowrap; */
		line-height: 40rpx;
		margin: 28rpx 0 0 26rpx;
	}
</style>